<template>
  <div class="pay-success">
    <header class="header">
      <svg-icon icon-class="vip" />
      恭喜您成功获得{{packages.name}}，成为会员！
    </header>
    <section>
      <span class="label">您将获得以下权益：</span>
      <rights-list :packages="packages"
        v-if="packages.name"
        :width="80"
        class="packages-item" />
    </section>
    <footer class="footer">
      <el-button class="btn-w150 btn-h36 has-radius"
        type="success"
        @click="close">我知道了</el-button>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { compareVersion } from '@/utils'
import { getPackageByPid } from '@/api/rights'
import RightsList from '@/components/member/rights-list'
export default {
  name: 'PaySuccess',
  components: {
    RightsList
  },
  props: {
    isCallPC: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      packages: {}
    }
  },
  computed: {
    ...mapGetters(['appInfo'])
  },
  created () {
    this.pkgid = this.$route.query.pkgid || '10000'
    this.getPackages()
    this.$xz('xz_page_load_finished', 'XZDesktopOrderVIPSuccess')
  },
  methods: {
    /** 获取在售权益包 */
    getPackages () {
      getPackageByPid({ pid: this.pkgid }).then(res => {
        const data = res.data.data || {}
        data.rights = this.filtersRights(data.rights)
        this.packages = data
      })
    },
    filtersRights (list = []) {
      return list.filter(item => {
        return compareVersion(this.appInfo.version, item.min_ver) !== -1
      })
    },
    close () {
      this.$xz('xz_switch_dialog', 'XZDesktopOrderVIPSuccess', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-success {
  width: 100%;
  height: 100%;
  padding: 10px 30px 40px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-family: "Microsoft YaHei";
  background: #34353b;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #f8de9d;
  font-size: 16px;
  .svg-icon {
    width: 24px;
    height: 24px;
    margin-right: 6px;
  }
}
section {
  margin: 17px 0 24px;
  width: 100%;
  text-align: center;
  .label {
    font-size: 14px;
  }
  .packages-item {
    margin-top: 17px;
    padding: 33px 40px;
  }
}

footer {
  width: 100%;
  text-align: center;
}
.footer{
  .btn{
    border-radius: 20px;
  }
}
</style>
<style lang="scss">
.pay-success .rights-wrap{
  .rights-list{
    margin-left: -10px!important;
    margin-right: -10px!important;
  }
  .img-wrap{
    padding: 0 5px;
  }
  .rights-item{
    padding: 0 10px;
  }
  .prev-btn,.next-btn{
    top:13px;
  }
}
</style>
